<template>
  <el-dialog title="银行卡交易信息" :visible.sync="detailOpen" width="50%" append-to-body>
    <el-form ref="form" :model="detail" label-width="120px">
      <h3>基本信息</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="订单号: ">
              {{ detail.sn }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="卡号: ">
              {{ detail.cardNo }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="类型: ">
              <dict-tag :options="dict.type.card_transaction_type" :value="detail.type"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="详情: ">
              {{ detail.detail }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易币种: ">
              {{ detail.transactionCurrency }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易金额: ">
              {{ detail.transactionAmount }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="备注: ">
              {{ detail.remark }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易卡本币: ">
              {{ detail.currency }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12" v-if="detail.type === 'Credit' || detail.type === 'TransferIn' || detail.type === 'Reversal'">
          <div class="grid-content bg-purple">
            <el-form-item label="卡入账金额: ">
              {{ (Number(detail.amount) - Number(totalFeeAmount)).toFixed(2) }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12" v-else>
          <div class="grid-content bg-purple">
            <el-form-item label="总扣除卡本金额: ">
              {{ (Number(detail.amount) + Number(totalFeeAmount)).toFixed(2) }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="交易卡本金额: ">
              {{ detail.amount }}
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <h3>手续费信息（总计：{{ totalFeeAmount }}）</h3>
      <el-row :gutter="24">
        <template v-if="detail.fees" v-for="(item, index) in detail.fees ">
          <el-row :gutter="24" >
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="币种: ">
                  {{ item.currency }}
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="金额: ">
                  {{ item.amount }}
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="类型: ">
                  {{ item.type }}
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-row>
      <h3>商户信息</h3>
      <el-row :gutter="24">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户名称: ">
              {{ detail.merchantName }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户类别码（MCC）: ">
              {{ detail.mcc }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="MCC分类: ">
              {{ detail.mccCategory }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户国家: ">
              {{ detail.merchantCountry }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户州/省: ">
              {{ detail.merchantState }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户城市: ">
              {{ detail.merchantCity }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户邮编: ">
              {{ detail.merchantZipcode }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="商户MID: ">
              {{ detail.merchantMid }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="创建时间: ">
              {{ parseTime(detail.createTime) }}
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="状态: ">
              <dict-tag :options="dict.type.transaction_status" :value="detail.status"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import {getTransactionDetail} from "@/api/triones/interlaceCard";
export default {
  name: "transactionDetail",
  dicts: ['card_transaction_type', 'transaction_status'],
  data() {
    return {
      detailOpen: false,
      detail: {
        ship: {}
      }
    };
  },
  methods: {
    show(id) {
      this.getDetail(id);
      this.detailOpen = true;
    },
    /** 银行卡详情 */
    getDetail(id) {
      getTransactionDetail(id).then(response => {
        this.detail = response.data;
      })
    }
  },
  computed: {
    totalFeeAmount() {
      if (!this.detail.fees) return '0.00';
      const total = this.detail.fees.reduce((sum, fee) => sum + (parseFloat(fee.amount) || 0), 0);
      return total.toFixed(2);
    }
  }
}
</script>
<style scoped lang="scss">

</style>
